<template>
<div>
  <input type="text" v-model="delstu.stuno" placeholder="请输入学号">
  <input type="text" v-model="delstu.name" placeholder="请输入姓名">
  

  <button @click="delstudent">删除</button>

  <table>
    <tr>
      <td>学号</td>
      <td>班级</td>
      <td>姓名</td>
      <td>性别</td>
      <td>年龄</td>
    </tr>
    <tr v-for="(stu, key) in students" :key="key">
      <td>{{stu.stuno}}</td>
      <td>{{stu.class}}</td>
      <td>{{stu.name}}</td>
      <td>{{stu.gender}}</td>
      <td>{{stu.age}}</td>
    </tr>
  </table>
</div>
</template>

<script>
import {students} from "../store/student"

export default {
  name: "Student",
  data() {
    return {
      students,
      delstu: {}
    }
  },
  methods: {
    delstudent() {
      students.forEach((v, index) => {
        if(v.name == this.delstu.name && v.stuno ==  this.delstu.stuno) {
          students.splice(index, 1);
        }
      })
    this.delstu.stuno = ""
    this.delstu.name = ""
    }
  }
}
</script>

<style scoped>
table {
  border: 1px solid gray;
  margin: 0 auto;
}
td {
  border: 1px solid gray;
}
</style>
